Item Lister

Du code javascript :

// EXAMINE THE DOCUMENT OBJECT //

    

    console.dir(document);

    console.log(document.domain);

    console.log(document.URL);

    console.log(document.title);

    //document.title =  123;   // thib pour changer le titre de la page DOM 

    console.log(document.doctype);

    console.log(document.head);

    console.log(document.body);

    console.log(document.all);

    console.log(document.all[10]);

    //document.all[10].textContent = 'Hello';    // dom thib pour change la 10 +0 du document de la page HTML

    console.log(document.forms[0]);

    console.log(document.links);

    console.log(document.images);

    

    // GETELEMENTBYID //

    

    /*****

    console.log(document.getElementById('header-title'));      // pour changer l'id de l'element de HEADER de la page HTML lie avec ce fichier 

    var headerTitle = document.getElementById('header-title');

    var header = document.getElementById('main-header');

    console.log(headerTitle);

    headerTitle.textContent = 'Hello';

    headerTitle.innerText = 'Goodbye';

    console.log(headerTitle.innerText);

    headerTitle.innerHTML = 'Hello';

    header.style.borderBottom = 'solid 3px #000';

    **/

    // GETELEMENTSBYCLASSNAME 

    

    /*** 

    var items = document.getElementsByClassName('list-group-item');   

    console.log(items);

    console.log(items[1]);

    items[1].textContent = 'Hello 2';

    items[1].style.fontWeight = 'bold';

    items[1].style.backgroundColor = 'yellow';

    **/

    // // Gives error

    items.style.backgroundColor = '#f4f4f4';

    

    for(var i = 0; i < items.length; i++){

    items[i].style.backgroundColor = '#f4f4f4';

    }

    

    // GETELEMENTSBYTAGNAME //

    

    /**** 

    var li = document.getElementsByTagName('li');     // thib   à retenir tag name fait appel au balise HTML du doc //

    console.log(li);

    console.log(li[1]);

    li[1].textContent = 'Hello 2';

    li[1].style.fontWeight = 'bold';

    li[1].style.backgroundColor = 'yellow';

    

    ***/

    

    // // Gives error

    items.style.backgroundColor = '#f4f4f4';

    

    for(var i = 0; i < li.length; i++){

    li[i].style.backgroundColor = '#f4f4f4';

    }      // boucle for javascript thib //

    

    // QUERYSELECTOR //

    var header = document.querySelector('#main-header');

    header.style.borderBottom = 'solid 4px #ccc';

    

    var input = document.querySelector('input');

    input.value = 'Hello World'

    

    var submit = document.querySelector('input[type="submit"]');

    submit.value="SEND"

    

    var item = document.querySelector('.list-group-item');

    item.style.color = 'red';

    

    var lastItem = document.querySelector('.list-group-item:last-child');

    lastItem.style.color = 'blue';

    

    var secondItem = document.querySelector('.list-group-item:nth-child(2)');

    secondItem.style.color = 'coral';

    

    // QUERYSELECTORALL //

    var titles = document.querySelectorAll('.title');

    

    console.log(titles);

    titles[0].textContent = 'Hello';

    

    var odd = document.querySelectorAll('li:nth-child(odd)');

    var even= document.querySelectorAll('li:nth-child(even)');

    

    for(var i = 0; i < odd.length; i++){

    odd[i].style.backgroundColor = '#f4f4f4';

    even[i].style.backgroundColor = '#ccc';

    }
Resultat JavaScript :

Item Lister 123

Add Items

Items

Com sur le script :

Du code javascript :
